 <template>
 	<view class="coll-page">
 		<common-list :isDataEmpty="tableData.length === 0" :status="status">
 			<template #list>
 				<view>
 					<view class="list">
 						<view class="card" v-for="(item, index) in tableData" :key="index">
 							<car-card :info="item" isColl @cancel="handCancel(index)"
 								@backInfo="backInfo($event, index)" />
 						</view>
 					</view>
 				</view>
 			</template>
 			<template #empty>
 				<view>
 					<view class="empty">
 						<image src="/static/collEmpty.png" mode=""></image>
 						<text>暂无收藏</text>
 					</view>
 				</view>
 			</template>
 		</common-list>
 		<uv-modal ref="modal" show-cancel-button confirm-color="#FF9113" @confirm="handConfirm" width="550rpx">
 			<view style="line-height: 100rpx;">确认要取消收藏吗?</view>
 		</uv-modal>
 	</view>
 </template>

 <script setup>
 	import {
 		ref
 	} from 'vue'
 	import {
 		onLoad,
 		onReachBottom,
 		onPullDownRefresh
 	} from "@dcloudio/uni-app";
 	import {
 		doList,
 		doDel
 	} from '@/apis/coll.js'
 	import {
 		userList
 	} from '@/hooks/userList.js'
 	import CommonList from '@/components/commonList/list.vue'
 	import CarCard from '@/components/card/CarCard.vue'

 	const modal = ref()
 	let oldIndex = 0
 	const handCancel = (index) => {
 		oldIndex = index
 		modal.value.open()
 	}
 	const handConfirm = async () => {
 		await doDel(tableData.value[oldIndex].id)
 		tableData.value.splice(oldIndex, 1)
 	}

 	const backInfo = (info, index) => {
 		if (!info.isCollect) {
 			tableData.value.splice(index, 1)
 		}
 	}
 	/**
 	 * 
 	 * �б�����
 	 * */
 	const getApi = async (params) => {
 		const res = await doList(params)
 		res.records.map(el => {
 			el.collId = el.id
 			el.id = el.productId
 			return el
 		})
 		return res
 	}
 	const {
 		tableData,
 		status,
 		fetchData,
 		onBottom,
 		onRefresh,
 		queryForm
 	} = userList({
 		apis: {
 			getApi
 		},
 		initForm: {}
 	})

 	onPullDownRefresh(() => {
 		onRefresh()
 	})
 	onReachBottom(() => {
 		onBottom()
 	})

 	onLoad(() => {
 		onRefresh()
 	})
 </script>

 <style lang="scss" scoped>
 	.coll-page {

 		.list {
 			padding: 24rpx;

 			.card {
 				&:not(:first-child) {
 					margin-top: 40rpx;
 				}
 			}
 		}

 		.empty {
 			padding-top: 140rpx;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;

 			image {
 				width: 371.8rpx;
 				height: 220.92rpx;
 			}

 			text {
 				margin-top: 36rpx;
 				font-size: 28rpx;
 				font-family: PingFang SC-Regular, PingFang SC;
 				font-weight: 400;
 				color: #999999;
 			}
 		}

 	}
 </style>